<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>拖拽</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.wrapper {
				position: relative;
				width: 640px;
				height: 480px;
				margin: 0 auto;
				background: yellow;
			}

			svg {
				position: absolute;
				left: 0;
				top: 0;
				/*z-index: 1;*/
			}

			.wrapper img {
				user-select: none;
			}

			#box {
				position: absolute;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: #ff21d1;
			}

			#boxPosition {
				position: absolute;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: red;
				left: 50%;
				transform: translateX(-50%);
				bottom: 20px;
			}
		</style>
	</head>
	<body>
		<div class="wrapper" id="wrapper">
			<svg width="100%" height="100%" style="position: absolute;" id="svg">
			</svg>
			<div id="boxPosition"></div>
		</div>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script>
			function drawSvg() {
				var startX = $('#boxPosition').position().left + $('#boxPosition').width() / 2;
				var startY = $('#boxPosition').position().top + $('#boxPosition').height() / 2;
				var endX = $('#box').position().left + $('#boxPosition').width() / 2;
				var endY = $('#box').position().top + $('#boxPosition').height() / 2;
				var r = $('#boxPosition').width() / 2; //半径
				var angle1 = '',
					angle2 = '';
				if (Math.sqrt((endX - startX) * (endX - startX) + (startY - endY) * (startY - endY)) <= 100) {
					document.querySelector("#svg").innerHTML = ' ';
					return false
				} else if (endX > startX && endY < startY) { //右上角
					var catheti1 = endX - startX;
					var catheti2 = startY - endY;
					var hypotenuse = Math.sqrt(catheti1 * catheti1 + catheti2 * catheti2);
					var sinx1_start = catheti2 / hypotenuse;
					var cosx1_start = catheti1 / hypotenuse;
					var x_start = r * 2 * cosx1_start;
					var y_start = r * 2 * sinx1_start;
					var sinx1_end = catheti1 / hypotenuse;
					var cosx1_end = catheti2 / hypotenuse;
					var x_end = r * 2 * sinx1_end;
					var y_end = r * 2 * cosx1_end;
					document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${startX+x_start},${startY-y_start} L ${endX-x_end},${endY+y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

				} else if (endX < startX && endY < startY) { //左上角
					var catheti1 = startX - endX;
					var catheti2 = startY - endY;
					var hypotenuse = Math.sqrt(catheti1 * catheti1 + catheti2 * catheti2);
					var sinx1_start = catheti2 / hypotenuse;
					var cosx1_start = catheti1 / hypotenuse;
					var x_start = r * 2 * cosx1_start;
					var y_start = r * 2 * sinx1_start;
					var sinx1_end = catheti1 / hypotenuse;
					var cosx1_end = catheti2 / hypotenuse;
					var x_end = r * 2 * sinx1_end;
					var y_end = r * 2 * cosx1_end;
					document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${startX- x_start},${startY-y_start} L ${endX+x_end},${endY+y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

				} else if (endX > startX && endY > startY) { //右下角
					var catheti1 = endX - startX;
					var catheti2 = endY - startY;
					var hypotenuse = Math.sqrt(catheti1 * catheti1 + catheti2 * catheti2);
					var sinx1_start = catheti2 / hypotenuse;
					var cosx1_start = catheti1 / hypotenuse;
					var x_start = r * 2 * cosx1_start;
					var y_start = r * 2 * sinx1_start;
					var sinx1_end = catheti1 / hypotenuse;
					var cosx1_end = catheti2 / hypotenuse;
					var x_end = r * 2 * sinx1_end;
					var y_end = r * 2 * cosx1_end;
					document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${startX + x_start},${startY+y_start} L ${endX-x_end},${endY-y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

				} else if (endX < startX && endY > startY) { //左下角
					var catheti1 = startX - endX
					var catheti2 = endY - startY;
					var hypotenuse = Math.sqrt(catheti1 * catheti1 + catheti2 * catheti2);
					var sinx1_start = catheti2 / hypotenuse;
					var cosx1_start = catheti1 / hypotenuse;
					var x_start = r * 2 * cosx1_start;
					var y_start = r * 2 * sinx1_start;
					var sinx1_end = catheti1 / hypotenuse;
					var cosx1_end = catheti2 / hypotenuse;
					var x_end = r * 2 * sinx1_end;
					var y_end = r * 2 * cosx1_end;
					document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${startX - x_start},${startY+y_start} L ${endX+x_end},${endY-y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

				} else if (endX > startX && endY == startY) { //右侧水平
					var x_start = startX + r * 2;
					var y_start = startY;
					var x_end = endX - r * 2;
					var y_end = endY;
					document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${x_start},${y_start} L ${x_end},${y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

				} else if (endX < startX && endY == startY) { //左侧水平
					var x_start = startX - r * 2;
					var y_start = startY;
					var x_end = endX + r * 2;
					var y_end = endY;
					document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${x_start},${y_start} L ${x_end},${y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

				} else if (endX == startX && endY < startY) { //上侧水平
					var x_start = startX;
					var y_start = startY - r * 2;
					var x_end = endX;
					var y_end = endY + r * 2;
					document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${x_start},${y_start} L ${x_end},${y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

				} else if (endX == startX && endY < startY) { //下侧水平
					var x_start = startX;
					var y_start = startY + r * 2;
					var x_end = endX;
					var y_end = endY - r * 2;
					document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${x_start},${y_start} L ${x_end},${y_end}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`

				} else {
					document.querySelector("#svg").innerHTML = `<defs>
          <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto"  fill="#666">
          <path d="M 0 0 L 5 2 L 0 4 z" />
           </marker>
            </defs>
            <path d="M ${startX},${startY} L ${endX},${endY}" stroke="#666" stroke-width="2" fill="none"
                    style="marker-end: url(#triangle);" />`
				}

			}

			$(document).on('click', '#box', function(e) {
				e.stopPropagation();
				return false;
			})

			$('.wrapper svg').on('click', function(e) {
				var left = e.offsetX;
				var top = e.offsetY;
				$('.wrapper').find('#box').remove();
				$('.wrapper').append(`<div id="box" style="left:${left - 25}px;top:${top - 25}px"></div>`);
				move();
				drawSvg()
			})

			function move() {
				// 获取元素和初始值
				var oBox = document.getElementById('box'),
					disX = 0,
					disY = 0;
				// 获取浏览器可见区域宽高，div宽高
				var browserWidth = document.getElementById('wrapper').offsetWidth,
					browserHeight = document.getElementById('wrapper').offsetHeight,
					boxWidth = document.getElementById('box').offsetWidth,
					boxHeight = document.getElementById('box').offsetHeight;
				// 容器鼠标按下事件
				oBox.onmousedown = function(e) {
					var e = e || window.event;
					// 鼠标相对于div左侧位置
					disX = e.clientX - this.offsetLeft;
					disY = e.clientY - this.offsetTop;
					document.onmousemove = function(e) {
						var e = e || window.event;
						oBox.style.left = (e.clientX - disX) + 'px';
						if ((e.clientX - disX) <= 0) {
							oBox.style.left = 0;
						} else if ((boxWidth - disX + e.clientX) >= browserWidth) {
							oBox.style.left = browserWidth - boxWidth + "px";
						}
						oBox.style.top = (e.clientY - disY) + 'px';
						if ((e.clientY - disY) <= 0) {
							oBox.style.top = 0;
						} else if ((boxHeight - disY + e.clientY) >= browserHeight) {
							oBox.style.top = browserHeight - boxHeight + "px";
						}
						drawSvg()
					};

					document.onmouseup = function() {
						document.onmousemove = null;
						document.onmouseup = null;
					};
					return false;
				};
			}
		</script>
	</body>
</html>
